<template>
  <div class="realtimeTradeListWrap" :style="{height: this.wrapHeight + 'px'}">
    <p class="max">
      <span>24<i v-text="lang.hour"></i>{{lang['trading page volume']}}</span>
      <span class="noChange">
        {{pair.Last24TradeQuantity | formatCurrency(pair, 'quantity')}}
      </span>
    </p>
    <div class="realtimeTradeListHead">
      <div class="thead">
        <div class="td">{{lang['time']}}</div>
        <div class="td">{{lang['price']}} ({{pair.BuyerCoinCode}})</div>
        <div class="td">{{lang['quantity']}} ({{pair.SellerCoinCode}})</div>
      </div>
    </div>
    <div class="realtimeTradeList" ref="realtimeTradeList" :style="{height: this.listHeight + 'px'}">
      <div class="tr" v-for="item in list">
        <div class="td" v-text="getHMS(item.CreateTime)"></div>
        <div class="td" :class="{up: item.trend === 1, down: item.trend === 0}">
          <span>{{formatNum(item.Price, pair.buyerPrecision)}}</span>
          <img src="../../../assets/images/head/arrow-up-green.png" v-if="item.trend === 1">
          <img src="../../../assets/images/head/arrow-down-red.png" v-if="item.trend === 0">
        </div>
        <div class="td">{{item.Num | fillDecimal(pair.sellerPrecision) | currency('', '', pair.sellerPrecision)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Utils from '@/utils/Utils.js'
import $ from 'jquery'
import EventBus from '@/service/EventBus.js'
import commonFilter from '@/filters/common.js'
import Decimal from '@/libs/decimal.min.js'

export default {
  name: 'RrealtimeTradeList',
  props: [
    'lang',
    'winMinHeight'
  ],
  data () {
    return {
      pair: {},
      pageSize: 50,
      pageIndex: 1,
      list: [],
      wrapHeight: 0,
      listHeight: 0
    }
  },
  filters: {
    // formatMulCurrency (a, b, item) {
    //   let precision = item.buyerPrecision
    //   a = new Decimal(a)
    //   a = a.mul(b).toFixed()
    //   return commonFilter.currency(commonFilter.fillDecimal(a, precision), 'USD', '', precision)
    // },
    formatCurrency (value, item, type) {
      let precision = item.buyerPrecision
      type === 'quantity' && (precision = 2) // 过年前陈总说数量是两位
      return commonFilter.currency(commonFilter.fillDecimal(new Decimal(parseFloat(value) || 0).toFixed(10), precision), 'USD', '', precision)
    }
  },
  methods: {
    formatNum (val, pre) {
      return commonFilter.fillDecimal(commonFilter.currency(new Decimal(val || 0).toFixed(10), 'USD', '', pre), pre)
    },
    getHMS: (val) => {
      return Utils.formatDate(Utils.fixNewDateForIE(val), 'hh:mm:ss')
    },
    createTrend () {
      // 最后一条默认为up
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i + 1] && parseFloat(this.list[i].Price) < parseFloat(this.list[i + 1].Price)) {
          this.list[i].trend = 0
        } else {
          this.list[i].trend = 1
        }
      }
    },
    // 更新最新价
    updateLatestPrice () {
      let latest = this.list[0] || {Price: 0, trend: 1}
      let price = latest.Price
      let trend = latest.trend
      EventBus.$emit('updateLatestPrice', {price: price, trend: trend})
    },
    init () {
      this.$http.post('Deal/GetDealList', {
        tradingConfigId: this.pair.TradingConfigID,
        pageIndex: this.pageIndex,
        pageSize: 50
      }, {
        // mock: 'realtimelist'
      }).then((res) => {
        let list = res.Data || []
        this.list = list
        this.createTrend()

        this.updateLatestPrice()

        this.$nextTick(() => {
          $(this.$refs.realtimeTradeListWrap).niceScroll().resize()
        })
      })
    },
    calcHeight () {
      let winHeight = $(window).height()
      // if (winHeight < this.winMinHeight) {
      //   winHeight = this.winMinHeight
      // }
      let pageHeadHeight = $('.pageHead').outerHeight()
      let headHeight = $('.realtimeTradeListHead').outerHeight()
      let tradeBoxHeight = $('.tradeWrap').outerHeight()

      this.wrapHeight = winHeight - pageHeadHeight - tradeBoxHeight
      this.listHeight = this.wrapHeight - headHeight

      this.$nextTick(() => {
        $(this.$refs.realtimeTradeList).niceScroll().resize()
      })
    }
  },
  created () {
    EventBus.$on('switchPair', (pair) => {
      this.pair = pair
      this.init()
    })
    EventBus.$on('pushRrealtimeTradeList', (nv) => {
      nv = nv || []
      nv.forEach((v) => {
        this.list.unshift(v)
        this.list.length > 200 && this.list.pop() // 若超过200条会卡顿
      })
      this.createTrend()

      this.updateLatestPrice()

      this.$nextTick(() => {
        $(this.$refs.realtimeTradeList).niceScroll().resize()
      })
    })
  },
  mounted () {
    this.calcHeight()
    $(window).resize(this.calcHeight)
    // console.log()
  }
}
</script>

<style lang="less">
@import "./../../../mixins.less";
@white: #b5b8c0;

.tradingPage {

  .realtimeTradeListWrap {
    float: left;
    width: @realtimeTradeListWidth;
    height: 200px;
    background-color: @tradingModuleBgColor;
    border-left: 1px solid #39405a;

    .max {
      display: none;
    }
  }

  .realtimeTradeListHead {
    width: 100%;
    background-color: @tradingHeadBgColor;
    border-bottom: 4px solid @tradingModuleBgColor;

    .thead {
      width: 285px - @tradingScrollWidth;
      height: 28px;
      line-height: 28px
    }
  }

  .realtimeTradeListHead, .realtimeTradeList {

    .td {
      float: left;
      white-space: nowrap;

      &:nth-of-type(1) {
        width: 30%;
        text-indent: 4px;
      }
      &:nth-of-type(2) {
        width: 34%;
        text-align: right;
      }
      &:nth-of-type(3) {
        width: 36%;
        text-align: right;
      }
    }
  }

  .realtimeTradeList {
    overflow: hidden;
    width: 285px - @tradingScrollWidth;
    line-height: 18px;
    color: @white;
    outline: none; // 火狐虚线

    .tr {
      height: 18px;
    }
    .td.up {
      color: @upColor;
    }
    .td.down {
      color: @downColor;
    }
  }
}

@media (max-width: @tradingPageMinWidth) { // 1366
  .tradingPage {
    @width: @realtimeTradeListWidth - 60px;

    .realtimeTradeListWrap {
      width: @width;
    }
    .realtimeTradeListHead .thead {
      width: @width - 2px;
    }
    .realtimeTradeList {
      width: @width - 10px;
    }
  }
}
@media (max-height: @tradingPageMinHeight) {
.tradingPage {

  .realtimeTradeListWrap .realtimeTradeListHead .thead {
    .mix-hl(23px);
  }
}
}
</style>
